highlight-background = #272822
highlight-current-line = #393939
highlight-selection = #515151
highlight-foreground = #cccccc
highlight-comment = #999999
highlight-red = #f92672
highlight-orange = #fd971f
highlight-yellow = #e6db74
highlight-green = #a6e22e
highlight-aqua = #9effff
highlight-blue = #66d9ef
highlight-purple = #ae81ff

$code-block
  background highlight-background
  margin 0!important
  padding-top: 38px
  border none
  overflow auto
  color highlight-foreground
  line-height font-size * line-height

$line-numbers
  color #666
  font-size 0.85em

.markdown-body
  pre, code
    font-family font-mono
  code
    background color-background
    text-shadow 0 1px #fff
    padding 0 0.3em
  pre
    @extend $code-block
    code
      background none
      text-shadow none
      padding 0
  .highlight
    @extend $code-block
    pre
      background highlight-background!important
      border-radius 0!important
      border none
      margin 0
      padding 0 0.3em!important
    table
      display block
      width auto
      min-width 100%
      -ms-overflow-style none
      overflow -moz-scrollbars-none
      &::-webkit-scrollbar
        display none
      tbody
        display block
        padding 10px 20px
      tr
        border 0!important
      td
        border none
        padding 0
    figcaption
      clearfix()
      font-size 0.85em
      color highlight-comment
      line-height 1em
      margin-bottom 1em
      a
        float right
    .gutter pre
      @extend $line-numbers
      text-align right
      padding-right gutter-width
    .line
      height font-size * line-height
    .line.marked
      background highlight-selection
  .gist
    margin 0 20px * -1
    border-style solid
    border-color color-border
    border-width 1px 0
    background highlight-background
    padding 15px 20px 15px 0
    .gist-file
      border none
      font-family font-mono
      margin 0
      .gist-data
        background none
        border none
        .line-numbers
          @extend $line-numbers
          background none
          border none
          padding 0 20px 0 0
        .line-data
          padding 0 !important
      .highlight
        margin 0
        padding 0
        border none
      .gist-meta
        background highlight-background
        color highlight-comment
        font 0.85em font-sans
        text-shadow 0 0
        padding 0
        margin-top 1em
        margin-left 20px
        a
          color color-link
          font-weight normal
          &:hover
            text-decoration underline

  pre
    .comment
    .title
      color highlight-comment
    .variable
    .attribute
    .tag
    .regexp
    .ruby .constant
    .xml .tag .title
    .xml .pi
    .xml .doctype
    .html .doctype
    .css .id
    .css .class
    .css .pseudo
      color highlight-red
    .number
    .preprocessor
    .built_in
    .literal
    .params
    .constant
      color highlight-orange
    .class
    .ruby .class .title
    .css .rules .attribute
      color highlight-green
    .string
    .value
    .inheritance
    .header
    .ruby .symbol
    .xml .cdata
      color highlight-green
    .css .hexcolor
      color highlight-aqua
    .function
    .python .decorator
    .python .title
    .ruby .function .title
    .ruby .title .keyword
    .perl .sub
    .javascript .title
    .coffeescript .title
      color highlight-blue
    .keyword
    .javascript .function
      color highlight-purple

  .highlight-wrap[data-rel]
    position relative
    overflow hidden
    border-radius 5px
    box-shadow 0 10px 30px 0px rgba(0,0,0,0.4)
    margin 35px 0
    ::-webkit-scrollbar
      height 10px

    ::-webkit-scrollbar-track
        -webkit-box-shadow inset 0 0 6px rgba(0,0,0,0.3)
        border-radius 10px

    ::-webkit-scrollbar-thumb
        border-radius 10px
        -webkit-box-shadow inset 0 0 6px rgba(0,0,0,0.5)

    &::before
      color white
      content attr(data-rel)
      height 38px
      line-height 38px
      background highlight-background
      color #fff
      font-size 16px
      position absolute
      top 0
      left 0
      width 100%
      font-family "Source Sans Pro", sans-serif
      font-weight bold
      padding 0px 80px
      text-indent 15px
      float left

    &::after
      content " "
      position absolute
      -webkit-border-radius 50%
      border-radius 50%
      background #fc625d
      width 12px
      height 12px
      top 0
      left 20px
      margin-top 13px
      -webkit-box-shadow 20px 0px #fdbc40, 40px 0px #35cd4b
      box-shadow 20px 0px #fdbc40, 40px 0px #35cd4b
      z-index 3
